<template>
  <div>
    <Card>
      <p slot="title">
        <!-- <Icon type="ios-film-outline"></Icon> -->
        产品列表
      </p>
      <a href="#" slot="extra" @click.prevent="toAddPage">
        <Icon type="ios-loop-strong"></Icon>产品添加
      </a>
      <tables
        ref="tables"
        editable
        searchable
        search-place="top"
        v-model="tableData"
        :columns="proLiatColumns"
        @on-delete="handleDelete"
      />
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
    </Card>
  </div>
</template>

<script>
import Tables from "_c/tables";
import { getTableData } from "@/api/data";
import { getProList } from "@/api/product";
export default {
    name: "pro_list_page",
    components: {
      Tables
    },
    data() {
      return {
        proLiatColumns: [
          {
            title: "产品名称",
            key: "proName",
            sortable: true
          },
          {
            title: "缩略图",
            key: "cover",
            sortable: true,
            render: (h, params) => {
              return h("div", [
                h("img", {
                  attrs: {
                    src: params.row.cover
                  },
                  style:{
                    maxWidth:'200px',
                    maxHeight:'100px'
                  }
                }),

              ]);
            }
          },
          {
            title: "发布日期",
            key: "pubdate",
            sortable: true
          },
          {
            title: "项目链接",
            key: "externalLinks",
            sortable: true
          },
          {
            title: "摘要",
            key: "abstract",
            sortable: true
          },
          {
            title: "操作",
            key: "handle",
            options: ["delete"],
            button: [
              (h, params, vm) => {
                return h(
                  "Poptip",
                  {
                    props: {
                      confirm: true,
                      title: "你确定要删除吗?"
                    },
                    on: {
                      "on-ok": () => {
                        vm.$emit("on-delete", params);
                        vm.$emit(
                          "input",
                          params.tableData.filter(
                            (item, index) => index !== params.row.initRowIndex
                          )
                        );
                      }
                    }
                  },
                  // [h("Button", "自定义删除")]1·
                );
              }
            ]
          }
        ],
        columns: [
          { title: "Name", key: "name", sortable: true },
          { title: "Email", key: "email", editable: true },
          { title: "Create-Time", key: "createTime" },
          {
            title: "Handle",
            key: "handle",
            options: ["delete"],
            button: [
              (h, params, vm) => {
                return h(
                  "Poptip",
                  {
                    props: {
                      confirm: true,
                      title: "你确定要删除吗?"
                    },
                    on: {
                      "on-ok": () => {
                        vm.$emit("on-delete", params);
                        vm.$emit(
                          "input",
                          params.tableData.filter(
                            (item, index) => index !== params.row.initRowIndex
                          )
                        );
                      }
                    }
                  },
                  [h("Button", "自定义删除")]
                );
              }
            ]
          }
        ],
        tableData: []
      };
    },
    methods: {
      handleDelete(params) {
        console.log(params);
      },
      exportExcel() {
        this.$refs.tables.exportCsv({
          filename: `table-${new Date().valueOf()}.csv`
        });
      },
      /**
       * 跳转到添加页面
       */
      toAddPage() {
        const route = {
          name: "MyProAdd",
          meta: {
            title: `动态路由`
          }
        };
        this.$router.push(route);
      }
    },
    mounted() {
      // getTableData().then(res => {
      //   this.tableData = res.data;
      // });
      getProList({ page: 1 }).then(res => {
        console.log(res);
        this.tableData = res.data.list.data;
      });
    }
  };
</script>

<style scoped>

</style>
